<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>

<link
    href="external_js/carpe_slider/default.css"
    rel="stylesheet"
    type="text/css" />

<script
    language="JavaScript"
    src="external_js/carpe_slider/slider.js" >
</script>
<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAAloePAlEicH6IDTkMBLcJrhQLYAuJ7-mOmkKXyFUcffg-VgEESRR4-l83zYg5za2MJV3QOc3a2UdjSw" type="text/javascript"></script>

<link rel=stylesheet href='style/style.css' type='text/css' />

<title>Prepare your flight</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="generator" content="HAPedit 3.1">
</head>

<body  onunload="GUnload()">

  <h1>Set up your flight in 3 steps</h1>

  <form name="build_task" method="post" action="pgSim.php">

<div class="rubriqueSite">
  <div class="titreMenu">1 - Spot your take off on the map</div>
	   	  Drag the flag on the map to choose your take off point.
<input name="takeoff_lng" type="hidden" />
<input name="takeoff_lat" type="hidden" />
		 <table>
			<tr>
				<td><div id='map' style='width: 570px; height: 420px; ' ></div></td>
				<td valign="top">
					<ul class="menu">
						<li>If winch start , enter here launch altitude above ground : <input name="winch_altitude" type="text" value="0" size="4"/> meters
						</li>
					</ul>
					<hr />
					<ul class="menu">
						<li>Preset places :
						</li>
					</ul>
					<a href="javascript:void(0)" onclick="javascript:presetPlace(27.988982, 86.924686,10)">Everest</a> : 27.988982, 86.924686 <br />
					<a href="javascript:void(0)" onclick="javascript:presetPlace(-3.076324,37.352915, 30)">Kilimanjaro</a> : -3.076334, 37.352925 <br />
					<a href="javascript:void(0)" onclick="javascript:presetPlace(43.079625,-79.076049,0)">Niagara Falls</a> (tip : fly with north-west or north wind) : 43.079625, -79.076049<br />
					<img src="img/bullet_star.png" title="the team approves this flight!" /><a href="javascript:void(0)" onclick="javascript:presetPlace(40.781841,-73.965797,600)">Winch start in Central Park</a>, NY : 40.781841, -73.965797<br />
					<a href="javascript:void(0)" onclick="javascript:presetPlace(41.89017,12.492313,600)">Winch start in Coliseum</a>, Roma, IT : 41.89017, 12.492313<br />
					<a href="javascript:void(0)" onclick="javascript:presetPlace(48.873783,2.294919,100)">Champs Elysees, Paris</a>, FR : 48.873783, 2.294919<br />
					<a href="javascript:void(0)" onclick="javascript:presetPlace(-13.163872,-72.545922,0)">Machu Pichu</a>, PE : -13.163872, -72.545922<br />
					<a href="javascript:void(0)" onclick="javascript:presetPlace(36.0736,-112.155,0)">Grand Canyon</a>, USA (tip : fly with	north wind): 36.0736, -112.155
				</td>
			</tr> 
		</table>

</div>

	<div class="rubriqueSite">
    <div class="titreMenu">2 - Select glider look (all wings fly the same for the moment, only look changes) :</div>
    <table width="100%">
    <tr>
    <td width="17%" align="center">
		<label for="pink"><img src ="http://sketchup.google.com/3dwarehouse/download?mid=76e945eee35a08413a426bad1ca64772&rtyp=st&ctyp=other"  />
		<br /><input type="radio" name="glider" id="pink" value="76e945eee35a08413a426bad1ca64772" checked> Dune by Aerodyne </label>
    </td>
    <td width="17%" align="center">
		<label for="blue"><img src ="http://sketchup.google.com/3dwarehouse/download?mid=3a6cb297b69d3f663a426bad1ca64772&rtyp=st&ctyp=other"  />
		<br /><input type="radio" name="glider" id="blue" value="3a6cb297b69d3f663a426bad1ca64772"> Vibe by Ozone </label>
    </td>
	<td width="16%" align="center">
		<label for="red"><img src ="http://sketchup.google.com/3dwarehouse/download?mid=ff8d1e410958e2413a426bad1ca64772&rtyp=st&ctyp=other"  />
		<br /><input type="radio" name="glider" id="red" value="ff8d1e410958e2413a426bad1ca64772"> Boom by Gin </label>
    </td>
	<td width="17%" align="center">
		<label for="yellow"><img src ="http://sketchup.google.com/3dwarehouse/download?mid=92bc089ce26627de3a426bad1ca64772&rtyp=st&ctyp=other"  />
		<br /><input type="radio" name="glider" id="yellow" value="92bc089ce26627de3a426bad1ca64772"> Ice peak by Niviuk   </label>
    </td>
	<td width="16%" align="center">
		<label for="white"><img src ="http://sketchup.google.com/3dwarehouse/download?mid=582ae2dc8930a0363a426bad1ca64772&rtyp=st&ctyp=other"  />
		<br /><input type="radio" name="glider" id="white" value="582ae2dc8930a0363a426bad1ca64772"> Avax by Gradient  </label>
    </td>
	<td width="16%" align="center">
		<label for="striped"><img src ="http://sketchup.google.com/3dwarehouse/download?mid=57f11b32fc54d62f3a426bad1ca64772&rtyp=st&ctyp=other"  />
		<br /><input type="radio" name="glider" id="striped" value="57f11b32fc54d62f3a426bad1ca64772"> Sigma by Advance </label>
    </td>
    </tr>
    </table>
	</div>



<div class="rubriqueSite">
  <div class="titreMenu">3 - Set the weather conditions for the flight</div>
	  
<table>
<tr>
  <td colspan="3">
    <b>Wind : </b>
  </td>
</tr>
 <tr>
  <td align="right">
    Wind direction (coming from) :
  </td>
  <td>
	<table style="background-position: center center; background-repeat: no-repeat;" background="img/compass.png">
	<tbody><tr>
	<td valign="bottom" width="35" align="right" height="35"><input name="wind_direction" value="315" type="radio"></td>

        <td valign="top" align="center"><input name="wind_direction" value="0" type="radio"></td>
	<td valign="bottom" width="35" align="left"><input name="wind_direction" value="45" type="radio"></td>
	</tr>
	<tr>
	<td align="left"><input name="wind_direction" value="270" type="radio"></td>
        <td width="30" align="center" height="30">&nbsp;</td>
	<td align="right"> <input name="wind_direction" value="90" type="radio"></td>
	</tr>

	<tr>
	<td valign="top" align="right" height="35"><input name="wind_direction" value="225" type="radio"></td>
        <td valign="bottom" align="center"><input name="wind_direction" value="180" type="radio"></td>
	<td valign="top" align="left"><input name="wind_direction" value="135" type="radio"></td>
	</tr>
	</tbody></table>
    </td>
    <td>   &nbsp;
    </td>
  </tr>
<tr>
 <td align="right">
  Wind speed :
 </td>
 <td>
<div class="carpe_horizontal_slider_display_combo">
  <div class="carpe_horizontal_slider_track"  style="background-color: #fff; border-color: #def #9ab #9ab #def;">
    <div class="carpe_slider_slit" style="background-color: #300; border-color: #b99 #fdd #fdd #b99;">&nbsp;</div>
    <!-- Default position: 80px -->
    <div
      class="carpe_slider"
      id="sliderWindSpeed"
      display="displayWindSpeed"
      style="left: 40px; background-color: #369; border-color: #69c #036 #036 #69c;">&nbsp;</div>
  </div>
  <div class="carpe_slider_display_holder" style="background-color: #fff; border-color: #def #9ab #9ab #def;">
    <!-- Default value: 180 -->
    <input
      class="carpe_slider_display"
      name="wind_speed"
      id="displayWindSpeed"
      style="background-color: #fff; color: #258;"
      type="text"
      from="0"
      to="10"
      value="4" />
  </div>
</div>
  </td>
  <td>  &nbsp;meters per second
  </td>
 </tr>
<tr>
  <td colspan="3">
    <b>Thermals : </b>
  </td>
</tr>
        <tr>
          <td align="right"> Thermals density :</td><td>

<div class="carpe_horizontal_slider_display_combo">
  <div class="carpe_horizontal_slider_track"  style="background-color: #fff; border-color: #def #9ab #9ab #def;">
    <div class="carpe_slider_slit" style="background-color: #300; border-color: #b99 #fdd #fdd #b99;">&nbsp;</div>
    <!-- Default position: 80px -->
    <div
      class="carpe_slider"
      id="sliderThermalsDensity"
      display="displayThermalsDensity"
      style="left: 50px; background-color: #369; border-color: #69c #036 #036 #69c;">&nbsp;</div>
  </div>
  <div class="carpe_slider_display_holder" style="background-color: #fff; border-color: #def #9ab #9ab #def;">
    <!-- Default value: 180 -->
    <input
      class="carpe_slider_display"
      name="thermal_density" 
      id="displayThermalsDensity"
      style="background-color: #fff; color: #258;"
      type="text"
      from="0"
      to="4"
      value="2" />
  </div>
</div>
          </td>
          <td>  &nbsp;thermals&nbsp;per&nbsp;km&nbsp;square
          </td>
        </tr>
        <tr>
          <td align="right">
            Thermals max height : </td>
          <td>

<div class="carpe_horizontal_slider_display_combo">
  <div class="carpe_horizontal_slider_track"  style="background-color: #fff; border-color: #def #9ab #9ab #def;">
    <div class="carpe_slider_slit" style="background-color: #300; border-color: #b99 #fdd #fdd #b99;">&nbsp;</div>
    <!-- Default position: 80px -->
    <div
      class="carpe_slider"
      id="sliderThermalsHeight"
      display="displayThermalsHeight"
      style="left: 50px; background-color: #369; border-color: #69c #036 #036 #69c;">&nbsp;</div>
  </div>
  <div class="carpe_slider_display_holder" style="background-color: #fff; border-color: #def #9ab #9ab #def;">
    <!-- Default value: 180 -->
    <input
      class="carpe_slider_display"
      name="thermal_height" 
      id="displayThermalsHeight"
      style="background-color: #fff; color: #258;"
      type="text"
      from="0"
      to="4200"
      value="2100" />
  </div>
</div>

          </td>
          <td>&nbsp;meters&nbsp;ASL
          </td>
        </tr>
        <tr>
          <td align="right">
            Thermals average max uplift speed :  </td>
            <td>

<div class="carpe_horizontal_slider_display_combo">
  <div class="carpe_horizontal_slider_track"  style="background-color: #fff; border-color: #def #9ab #9ab #def;">
    <div class="carpe_slider_slit" style="background-color: #300; border-color: #b99 #fdd #fdd #b99;">&nbsp;</div>
    <!-- Default position: 80px -->
    <div
      class="carpe_slider"
      id="sliderThermalsSpeed"
      display="displayThermalsSpeed"
      style="left: 50px; background-color: #369; border-color: #69c #036 #036 #69c;">&nbsp;</div>
  </div>
  <div class="carpe_slider_display_holder" style="background-color: #fff; border-color: #def #9ab #9ab #def;">
    <!-- Default value: 180 -->
    <input
      class="carpe_slider_display"
      name="thermal_speed"
      id="displayThermalsSpeed"
      style="background-color: #fff; color: #258;"
      type="text"
      from="2"
      to="10"
      value="6" />
  </div>
</div>

          </td>
          <td> meters per second
          </td>
        </tr>
        <tr>
          <td align="right">
            Thermals size :</td><td>
            <input type="radio" name="thermal_size" id="thermal_size_small" value="40"><label for="thermal_size_small"> small </label>
            <br />
            <input type="radio" name="thermal_size" id="thermal_size_medium" value="60"  checked><label for="thermal_size_medium"> medium </label>
            <br />
            <input type="radio" name="thermal_size" id="thermal_size_big" value="80"><label for="thermal_size_big"> large </label>
          </td>
        </tr>
      </table>
</div>

  <input type="hidden" name="site_id" value="<?php echo $site_id;?>" />
  <input type="hidden" name="member_id" value="<?php echo $member_id;?>" />
  <input type="hidden" name="task_length" id="task_length" value="0" />
  <input type="hidden" name="last_active_waypoint" id="last_active_waypoint" value="1" />

<div class="rubriqueSite">
<div class="titreMenu">4 - Check the information above and validate (did we say '3 steps' ?)</div>
  <p>Double check the information above, ang fly safe !</p>
  <p>&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" /></p>
  &nbsp;
  </form>
</div>

</body>
<script type="text/javascript">

function dragendUpdate(glatlng) {
	document.build_task.takeoff_lat.value = glatlng.lat();
	document.build_task.takeoff_lng.value = glatlng.lng();
	map.panTo(glatlng);
}

// Display the map, with some controls and set the initial location 
      var mapobj = document.getElementById("map");
      var map = new GMap2(mapobj);
      map.addControl(new GSmallMapControl());
//     map.addControl(new GMapTypeControl());
	  map.addMapType(G_SATELLITE_3D_MAP);
      map.addMapType(G_PHYSICAL_MAP);
      map.addControl(new GHierarchicalMapTypeControl());
      map.setMapType(G_PHYSICAL_MAP);
      map.setCenter(new GLatLng(0,0), 1, G_PHYSICAL_MAP);
	  map.enableDoubleClickZoom();
	  map.enableScrollWheelZoom();
// Display markers
        var baseIcon = new GIcon(G_DEFAULT_ICON);
        baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
        baseIcon.iconSize = new GSize(20, 34);
        baseIcon.shadowSize = new GSize(37, 34);
        baseIcon.iconAnchor = new GPoint(9, 34);
        baseIcon.infoWindowAnchor = new GPoint(9, 2);
		
		var takeOffMarker = createMarker(new GLatLng(0,0)) ;
        map.addOverlay(takeOffMarker);

        function createMarker(point) {
          // Create a lettered icon for this point using our icon class
		  markerOptions = { draggable: true };
		 
          var marker = new GMarker(point, markerOptions);
		 
          GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml("<b> Start  point</b>");
		  });
		  
			GEvent.addListener(marker, "dragstart", function() {
				map.closeInfoWindow();
			});
		 
			GEvent.addListener(marker, "dragend", function() {
				dragendUpdate(marker.getLatLng());
			});
		return marker;
        }

function presetPlace(lat, lng, winch) {
	var point = new GLatLng(lat, lng);
	takeOffMarker.setLatLng(point);
	document.build_task.winch_altitude.value = winch;
	document.build_task.takeoff_lat.value = lat;
	document.build_task.takeoff_lng.value = lng;
	map.setCenter(point, 12);
}	



</script>
</html>